$(function () {
    // 1.1 获取裁剪区域的 DOM 元素
    var $image = $('#image')
    // 1.2 配置选项
    const options = {
        // 纵横比
        aspectRatio: 1,
        // 指定预览区域
        preview: '.img-preview'
    }
    // 1.3 创建裁剪区域
    $('#image').cropper(options)

     //头像上传
    //1选择图片 渲染图片 上传图片
    // 选择图片
    $('.uploadpic1').click(function () {
        $('.uploadpic').click()
        // 渲染图片

        $('.uploadpic').change(function () {

            // console.log(this);
            let file = this.files[0]
            if (file == undefined) {
                return layui.layer.msg('请选择上传的图片')
            }
            let url = URL.createObjectURL(file)
            // console.log(url);
            $('#image').cropper('destroy')
                .attr('src', url)
                .cropper(options)
        })
        $('.uploadbtn').click(function () {
            //把裁剪出來的圖片轉換成base64
            var dataURL = $image
                .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
                    width: 100,
                    height: 100
                })
                .toDataURL('image/png')       // 将 Canvas 画布上的内容，转化为 base64 格式的字符串
                console.log(dataURL);
                // 取消空格
                // dataURL = dataURL.replace(/\. +/g, '')
                // 去掉換行
                // dataURL = dataURL.replace(/[\r\n]/g, '')
                // dataURL = dataURL.substring(23);



                axios({ 
                    method:'POST',
                    url:'/my/update/avatar',
                    // data:encodeURIComponent(`avatar=${dataURL}`)
                    // data:(`avatar=${dataURL}`),  //图片无法正常显示
                    // data:`avatar=${encodeURIComponent(dataURL)}`
                    data:'avatar='+encodeURIComponent(dataURL)
                }).then(res=>{
                    console.log(res);
                    if(res.data.status!==0){
                        layui.layer.msg(res.data.message)
                    }else{
                        layui.layer.msg(res.data.message)
                        window.parent.getUserInfo()
                        console.log(11);
                    }
                })
        })
    })
});

